<template>
  <base-page-view ref="pageView" class-name="order-result-container">
    <base-nav :title="title" background="#E21536" title-color="white">
      <view slot="left" class="header-left" @click="handelBack">
        <image src="/static/images/icon/icon_return_white.png" />
      </view>
    </base-nav>
    <view v-if="orderObject" class="order-succeed">
      <view class="order-succeed-container">
        <!-- <view v-if="query.boxType === 'apply' || query.boxType === 'buy'" class="text">
          <b-image :src="`/static/images/box/order_success_${query.boxType}.png`" :is-asset="true" width="750" height="388" />
        </view>
        <view v-else class="text">
          <b-image src="/static/images/order/pay_success.png" :is-asset="true" width="750" height="388" />
        </view> -->
        <view class="text">
          <b-image src="/static/images/order/pay_succeed_icon.png" width="100" height="100" />
          <view v-if="query.boxType === 'buy'">
            快去联系您的朋友发起申购吧~
          </view>
          <view v-else-if="query.boxType === 'apply'">
            快去联系您的审批人及时审批吧~
          </view>
          <view v-else-if="query.boxType === 'release'">
            您的云仓库存已扣减
          </view>
          <view v-else>
            我们将尽快安排发贷，请您保持手机通讯畅通。
          </view>
        </view>
        <view v-if="query.boxType" class="btnRow">
          <text v-if="query.boxType === 'take'" class="o-span" @click="toBoxDetail">查看提货详情</text>
          <text v-else-if="query.boxType === 'release'" class="o-span" @click="toBoxDetail">返回云仓库存</text>
          <text v-else class="o-span" @click="toBoxDetail">查看申购详情</text>
          <text v-if="query.boxType === 'release'" class="o-span theme" @click="$navigateTo('/pagesBox/inventory-details/index?stock_id=' + query.stock_id+'&series_id='+ query.series_id, '', 'redirectTo')">查看下拨明细</text>
          <text v-else class="o-span theme" @click="lookMore">返回首页</text>
        </view>
        <view v-else class="btnRow">
          <text class="o-span" @click="lookDetail">查看订单</text>
          <text v-if="extraData && extraData.platform" class="o-span theme" @click="handelBack">继续观看</text>
          <text v-else-if="orderObject.type===260" class="o-span theme" @click="shareMore">分享赚更多</text>
          <text v-else class="o-span theme" @click="lookMore">返回首页</text>
        </view>
      </view>
      <view v-if="tipShow" class="tip-con">
        <image class="tip-con-icon" src="/static/images/order/icon_message.png"></image>
        凡是自称快递、商家客服主动联系您购物退款，都是诈骗！
      </view>
      <view v-if="adList && adList.length &&orderObject.type!==260" class="adList">
        <block v-for="(item, index) in adList" :key="index">
          <b-image :key="index" :src="item.pic" mode="widthFix" @click="toAd(item, index)" />
        </block>
      </view>
      <!-- 38礼包 广告弹窗 -->
      <template v-if="showAdPopup && orderObject.successPay && orderObject.status !== 1 &&orderObject.type!==260">
        <view class="mask" @touchmove.stop="() => {}"></view>
        <view class="ad-popup" :style="'background-image: url('+orderObject.successPay.popupBackgroundImg+')'">
          <view class="block">
            <image class="close" src="/static/images/icon/icon_close.png" mode="aspectFit" @click="showAdPopup=false " />

            <image class="red_packet_img" :src="orderObject.successPay.popupSignImg" mode="widthFix" @click="toPage(orderObject.successPay.signSkipUrl)" />
            <image class="red_packet_img" :src="orderObject.successPay.popupCouponImg" mode="widthFix" @click="toPage('/pagesMine/coupon/index')" />
            <view style="position: relative">
              <image class="red_packet_img" :src="orderObject.successPay.popupShareImg" mode="widthFix" />
              <b-open-type open-type="share" :option="shareOption" />
            </view>
          </view>
        </view>
      </template>
      <view v-if="show" class="moreProduct">
        <view class="o-p">- 猜您喜欢 -</view>
        <view class="o-small">ALL THE GOODS</view>
        <likeList ref="likeListRef" image-radius="0" :from="orderObject.type===260? 'h5_gift' : ''" @getCommendData="getCommendData" />
      </view>
    </view>
  </base-page-view>
</template>

<script>
import { getOrderState } from '@/utils/common'
import { toFunctionDetail } from '@/utils/navigateTo'
import likeList from '@/components/likeGoodsList/index'
import './index.scss'
import { navigateToMiniProgram, toMpHomePage, pageNavigateBack } from '@/utils/navigateTo'
import { mapGetters } from 'vuex'
export default {
  name: 'OrderSucceed',
  components: {
    likeList
  },
  data() {
    return {
      title: '支付成功',
      shareOption: {}, // 分享自定义设置
      orderObject: {},
      orderObjectSucceed: {},
      adList: [],
      query: {},
      shareDialog: false,
      couponRedPacket: true,
      orderNo: '',
      show: true,
      showAdPopup: false,
      tipShow: true // 是否显示诈骗提示
    }
  },
  computed: {
    ...mapGetters(['extraData']),
    orderStatus() {
      return this._getOrderState(this.orderObject.status)
    }
  },
  onLoad(options) {
    this.orderNo = options.orderNo
    this.query = {
      ...options
    }
    if (this.query.boxType) {
      if (this.query.boxType !== 'take' && this.query.boxType !== 'release') {
        uni.setNavigationBarTitle({
          title: '申购成功'
        })
        this.title = '申购成功'
      } else if (this.query.boxType === 'release') {
        uni.setNavigationBarTitle({
          title: '下拨成功'
        })
        this.title = '下拨成功'
        this.tipShow = false
      }
      if (this.query.boxType === 'apply') {
        this.tipShow = false
      }
      return
    }
    if (this.orderNo) {
      this.getOrderStatus()
    }

    // #ifdef H5
    // window.history.pushState({ title: '', url: '#' }, 'title')
    // #endif
  },
  onShow() {
    // #ifdef H5
    // window.addEventListener('popstate', (e) => {
    //   e.preventDefault()
    //   this.$router.go(-2)
    // }, false)
    // #endif
  },
  onHide() {
    // #ifdef H5
    // window.removeEventListener('popstate')
    // #endif
  },
  destroyed() {
    // #ifdef H5
    // 当页面销毁必须要移除这个事件，vue不刷新页面，不移除会重复执行这个事件
    // window.removeEventListener('popstate')
    // #endif
  },
  onShareAppMessage(res) {
    return this.$queryShareOption(res, this.shareOption)
  },
  onReachBottom() {
    this.$refs.likeListRef.loadMore()
  },
  onPageScroll(res) {
    this.$refs.pageView.scrollShowBtn(res)
  },
  methods: {
    toAd(item, index) {
      // const obj = {
      //   page_name: '支付成功广告入口',
      //   key: 'pay_success_ad',
      //   index: index
      // }
      toFunctionDetail(item, 'navigateTo', {
        preseat: item.title,
        firstseat: '支付成功页'
      })
    },
    async getOrderPaySucceed() {
      const res = await this.$api.orderApi.getOrderPaySuccess({
        orderType: this.orderObject.type
      })
      if (res.success) {
        this.$set(this.orderObject, 'successPay', res.data)
        this.showAdPopup = true
        this.initShare()
        this.setTitle()
      }
    },
    toBoxDetail() {
      if (this.query.boxType === 'apply') {
        this.$navigateTo(`/pagesBox/approval/detail?id=${this.query.id}&type=purchase`, {}, 'redirectTo')
      } else if (this.query.boxType === 'release') {
        this.$navigateTo('/pagesBox/inventory/index', {}, 'redirectTo')
      } else {
        this.$navigateTo(`/pagesBox/pick-up-detail/index?orderNo=${this.query.id}&boxType=${this.query.boxType}`, '', 'redirectTo')
      }
    },
    lookDetail() {
      // 29.9礼包埋点
      if (this.orderObject && this.orderObject.type === 260) {
        this.$sensorTrack('CLICKBUTTON', {
          page_name: 'payment_sucess',
          button_name: 'order_list'
        })
      }

      this.$navigateTo('/pagesOrder/orderDetail/index?orderNo=' + this.orderNo, '', 'redirectTo')
    },
    lookMore() {
      this.$navigateTo('/pages/home/index', {}, 'reLaunch')
    },
    shareMore() {
      // 29.9礼包埋点
      this.$sensorTrack('CLICKBUTTON', {
        page_name: 'payment_sucess',
        button_name: 'h5_gift'
      })
      this.$navigateTo('/pagesActivity/promotion/index', {}, 'reLaunch')
    },
    async getOrderStatus() {
      const res = await this.$api.orderApi.getOrderResult({
        order_no: this.orderNo
      })
      if (!res.success) {
        return
      }
      this.orderObjectSucceed = res.data.pay_result
      this.adList = res.data.marketing_list
      if (!this.orderObjectSucceed || !this.orderObjectSucceed.pay_type) {
        this.$navigateTo('pagesOrder/orderDetail/index?orderNo=' + this.orderNo, 'redirectTo')
        return
      }
      const rest = await this.$api.orderApi.getOrderDetail({
        order_no: this.orderNo
      })
      this.orderObject = rest.data
      this.getOrderPaySucceed()
      this.setTitle()
    },
    setTitle() {
      this.$setNavTitle(this.orderStatus)
    },
    _getOrderState(item) {
      return getOrderState(item)
    },
    getCommendData(show) {
      this.show = show
    },
    handelBack() {
      if (this.extraData && this.extraData.platform) {
        navigateToMiniProgram({
          success: () => {
            console.log('返回成功')
            this.$store.dispatch('setExtraData', null)
            toMpHomePage()
          }
        })
      } else {
        pageNavigateBack()
      }
    },
    toPage(url) {
      toFunctionDetail({
        type: 0,
        type_val: url
      })
    },
    // 分享初始化
    initShare() {
      if (this.orderObject && this.orderObject.successPay && this.orderObject.status !== 1 && this.orderObject.successPay.shareResponse) {
        const shareResponse = this.orderObject.successPay.shareResponse
        let share_url = ''
        if (shareResponse.url.match('#')) {
          share_url = shareResponse.url.split('#')[1]
        } else {
          share_url = shareResponse.url.split('bisinuolan.cn')[1]
        }
        this.shareOption.share_title = shareResponse.title
        this.shareOption.share_content = shareResponse.content
        this.shareOption.share_url = share_url
        this.shareOption.share_icon = shareResponse.pic
        this.shareOption.share_image = shareResponse.pic
        this.showShare()
      } else {
        this.hideShare()
      }
    }
  }
}

</script>

